<template>
	<uv-row customStyle="flex-wrap: wrap">
		<uv-col :span="12" v-for="(e,i) in list" :key="i">
			<view class="card">
				<view @click="btnClick(1, i)">
					<view class="flex align-center justify-between padding1">
						<view class="flex-1 flex align-center">
							<uv-text
								class="uv-text-init"
								:text="'订单号：' + e.order_no" color="#333" size="26rpx" 
							/>
						</view>
						<text class="status">{{getStatusText(e.status)}}</text>
					</view>
					<view class="flex padding2">
						<image :src="e.product_image" class="thumb"/>
						<view class="flex-1 flex align-start justify-between">
							<view>
								<uv-text :text="e.product_name" color="#333" size="30rpx" />
								<uv-text :text="e.spec_values" :custom-style="{background:'#f2f2f2',padding:'5px'}" color="#333" size="22rpx" v-if="e.spec_values"/>
							</view>
							
							<view class="jiage">
								<view class="t1">￥{{e.product_price}}</view>
								<view class="t2">x{{e.num}}</view>
							</view>
						</view>
					</view>
					<view class="padding2">
						<view class="flex">
							<span class="flex-label">服务时间：</span>
							<uv-text :text="e.service_time" :custom-style="{flex:1}"></uv-text>
						</view>
						<view class="flex" v-if="e.address">
							<span class="flex-label">服务地址：</span>
							<uv-text :text="e.address.province + e.address.city + e.address.area + e.address.address" :custom-style="{flex:1}"></uv-text>
						</view>
						<view class="flex">
							<span class="flex-label">服务报价：</span>
							<uv-text :text="e.total_price" :custom-style="{flex:1}"></uv-text>
						</view>
					</view>
					<uv-line color="#EEEEEE" />
					<view class="padding1 info">
						<text>合计:</text>
						<text>￥</text>
						<text>{{e.total_price}}</text>
					</view>
					<uv-line color="#EEEEEE" />
				</view>
				<view class="tool">
					<template v-if="e.status===0">
						<uv-button text="查看详情" size="mini" @click="btnClick(1, i)"/>
						<uv-button text="修改订单" size="mini" @click="btnClick(2, i)" />
						<uv-button text="立即支付" size="mini" @click="btnClick(4, i)" color="#BC2722" />
					</template>
					
					<template v-if="e.status===1">
						<uv-button text="修改订单" size="mini" @click="btnClick(2, i)" />
						<uv-button text="查看详情" size="mini" @click="btnClick(1, i)"/>
					</template>
					
					<template v-if="e.status===2">
						<uv-button text="售后申请" size="mini" @click="btnClick(5, i)" />	
						<uv-button text="查看详情" size="mini" @click="btnClick(1, i)" />
						<uv-button text="写评价" size="mini" @click="btnClick(6, i)" />
					</template>
					
					<template v-if="e.status==3">
						<uv-button text="查看详情" size="mini" @click="btnClick(1, i)" />
					</template>
					
					<template v-if="e.status===4">
						<uv-button text="查看详情" size="mini" @click="btnClick(1, i)" />
					</template>
					<template v-if="e.status===5">
						<uv-button text="售后详情" size="mini" @click="btnClick(7, i)" />
					</template>
				</view>
			</view>
		</uv-col>
	</uv-row>
</template>

<script setup>
	import { computed } from 'vue'
	defineProps({
		list: {
			type: Array,
			default: () => []
		}
	})
	const emit = defineEmits(['btnClick'])
	const getStatusText = (status) => {
	  const statusMap = {
	    0: '待支付',
	    1: '待服务',
	    2: '待评价',
		3: '已完成',
	    4: '已取消',
		5: '已售后'
	  }
	  return statusMap[status] || '未知状态'
	}
	const btnClick = (type, i) => emit('btnClick', { type, i })
</script>

<style lang="scss" scoped>
	.flex-label {
	  color: #979797;
	  flex-shrink: 0;
	  margin-right: 8px;
	}
	.card {
		margin-top: 30rpx;
		background-color: #fff;
	}
	.status {
		color: #BC2722;
		font-size: 26rpx;
		display: inline-flex;
		justify-content: flex-end;
	}
	.thumb {
		width: 80px;
		height: 80px;
		border-radius: 3px;
		margin-right: 20rpx;
	}
	.padding1 {
		padding: 20rpx;
	}
	.padding2 {
		padding: 0 20rpx;
		margin-bottom: 20rpx;
	}
	.margin10 {
		margin-right: 10rpx;
	}
	.margin20 {
		margin-right: 20rpx;
	}
	.t1 {
		color: #333;
		font-size: 30rpx;
	}
	.t2 {
		color: #979797;
		font-size: 24rpx;
		text-align: right;
	}
	.jiage {
		margin-left: 20rpx;
	}
	.info {
		text-align: right;
		text {
			&:nth-child(1) {
				color: #979797;
				font-size: 24rpx;
				margin-right: 10rpx;
			}
			&:nth-child(2) {
				color: #333;
				font-size: 24rpx;
			}
			&:nth-child(3) {
				color: #333;
				font-size: 20rpx;
			}
			&:nth-child(4) {
				color: #333;
				font-size: 30rpx;
				margin-right: 10rpx;
			}
			&:nth-child(5) {
				color: #333;
				font-size: 24rpx;
			}
		}
	}
	.tool {
		padding: 20rpx;
		display: flex;
		justify-content: flex-end;
		gap: 20rpx;
	}
</style>